<template>
  <view v-if="visibleSync" :style="[customStyle, { zIndex: Number(uZindex) - 1 }]" class="u-drawer"
        hover-stop-propagation
  >
    <mui-mask :duration="duration" :custom-style="maskCustomStyle" :mask-click-able="maskCloseAble"
              :z-index="Number(uZindex) - 2" :show="showDrawer && mask" @click="maskClick"
    />
    <view class="u-drawer-content" :class="[
      safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
      `u-drawer-${mode}`,
      showDrawer ? 'u-drawer-content-visible' : '',
      zoom && mode === 'center' ? 'u-animation-zoom' : '',
    ]" :style="style" @tap.stop.prevent="modeCenterClose(mode)" @touchmove.stop.prevent
    >
      <view v-if="mode === 'center'" class="u-mode-center-box" :style="[centerStyle]" @tap.stop.prevent
            @touchmove.stop.prevent
      >
        <slot></slot>
      </view>
      <slot v-else></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import MuiMask from '../mask/mask.vue'
import { PopupProps } from './types'

defineOptions({
  name: 'UPopup'
})

/**
 * popup 弹窗
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @tutorial https://uview-pro.netlify.app/components/popup.html
 * @property {string} mode 弹出方向（默认left）
 * @property {boolean} mask 是否显示遮罩（默认true）
 * @property {Stringr | number} length mode=left | 见官网说明（默认auto）
 * @property {boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
 * @property {boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
 * @property {boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
 * @property {object} custom-style 用户自定义样式
 * @property {Stringr | number} negative-top 中部弹出时，往上偏移的值
 * @property {Numberr | string} z-index 弹出内容的z-index值（默认1075）
 * @event {Function} close 弹出层收起
 * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
 */

const props = defineProps(PopupProps)
const emit = defineEmits(['update:modelValue', 'open', 'close', 'onMaskClick'])

const popupzIndex = 10005
const uZindex = computed(() => (props.zIndex ? props.zIndex : popupzIndex))

// 组件内部状态
const visibleSync = ref(false)
const showDrawer = ref(false)
const timer = ref<ReturnType<typeof setTimeout> | null>(null)

// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
const style = computed(() => {
  let style: Record<string, any> = {}
  // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
  if (props.mode === 'left' || props.mode === 'right') {
    style = {
      width: props.width ? getUnitValue(props.width) : getUnitValue(props.length),
      height: '100%',
      transform: `translate3D(${props.mode === 'left' ? '-100%' : '100%'},0px,0px)`
    }
  }
  else if (props.mode === 'top' || props.mode === 'bottom') {
    style = {
      width: '100%',
      height: props.height ? getUnitValue(props.height) : getUnitValue(props.length),
      transform: `translate3D(0px,${props.mode === 'top' ? '-100%' : '100%'},0px)`
    }
  }
  // 如果用户设置了borderRadius值，添加弹窗的圆角
  style.zIndex = uZindex.value
  if (props.duration) style.transition = `all ${Number(props.duration) / 1000}s linear`
  return style
})
function addUnit(value: string | number = 'auto', unit: string = 'rpx'): string {
  const strValue = String(value)
  // 用uView内置验证规则中的number判断是否为数值
  return typeof strValue === 'number' ? `${strValue}${unit}` : strValue
}
// 中部弹窗的特有样式
const centerStyle = computed(() => {
  const style: Record<string, any> = {}

  // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
  style.height = props.height ? getUnitValue(props.height) : 'auto'
  // 计算整理后的z-index值
  style.zIndex = uZindex.value
  style.marginTop = `-${addUnit(props.negativeTop)}`
  return style
})
// let closeFromInner = false // value的值改变，是发生在内部还是外部
watch(
  () => props.modelValue,
  val => {
    if (val) {
      open()
    }
    else {
      // close()
      change('showDrawer', 'visibleSync', false)
    }
  }
)

onMounted(() => {
  if (props.modelValue) open()
})

/**
 * 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
 */
function getUnitValue(val: string | number) {
  if (/(?:%|px|rpx|auto)$/.test(String(val))) return val
  else return `${val}rpx`
}

/**
 * 遮罩被点击
 */
function maskClick() {
  emit('onMaskClick')
}

/**
 * 关闭弹窗
 */
function close() {
  // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
  // 造成@close事件触发两次
  // closeFromInner = true
  change('showDrawer', 'visibleSync', false)
}

/**
 * 中部弹出时，点击内容区域关闭弹窗
 */
function modeCenterClose(mode: string) {
  // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
  // 让其只在mode=center时起作用
  if (mode === 'center' && props.maskCloseAble) {
    emit('onMaskClick')
  }
}

/**
 * 打开弹窗
 */
function open() {
  change('visibleSync', 'showDrawer', true)
}

/**
 * 控制弹窗显示/隐藏的动画和状态
 * 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
 * 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
 */
function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 'showDrawer', status: boolean) {
  // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
  if (props.popup === true) {
    emit('update:modelValue', status)
  }
  (param1 === 'showDrawer' ? showDrawer : visibleSync).value = status
  if (status) {
    // #ifdef H5 || MP
    timer.value = setTimeout(() => {
      (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status
      emit(status ? 'open' : 'close')
    }, 50)
    // #endif
    // #ifndef H5 || MP
    nextTick(() => {
      (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status
      emit(status ? 'open' : 'close')
    })
    // #endif
  }
  else {
    timer.value = setTimeout(() => {
      (param2 === 'showDrawer' ? showDrawer : visibleSync).value = status
      emit(status ? 'open' : 'close')
    }, Number(props.duration))
  }
}
</script>

<style scoped lang="scss">
.u-drawer {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.u-drawer-content {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: absolute;
  z-index: 1003;
  transition: all 0.25s linear;
}

.u-drawer-left {
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}

.u-drawer-right {
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #ffffff;
}

.u-drawer-top {
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
}

.u-drawer-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
}

.u-drawer-center {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: row;
  /* #endif */
  flex-direction: column;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 99999;
}

.u-mode-center-box {
  min-width: 100rpx;
  min-height: 100rpx;
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: relative;
}

.u-drawer-content-visible.u-drawer-center {
  transform: scale(1);
  opacity: 1;
}

.u-animation-zoom {
  transform: scale(1.15);
}

.u-drawer-content-visible {
  transform: translate3D(0px, 0px, 0px) !important;
}

.safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.u-animation-zoom {
  transform: scale(1.15);
}
</style>
